<template>
	<RkContainer :isFooter="false">
		<template #header_left></template>
		<template #aside>
			<RkTreePanel
				:serverConfig="{
					url: '/dict/getFromProcessClassifyByType',
					// type: 1-表单 2-流程
					params: { type: 1 },
				}"
				@currentChange="handleTreeChange"
			/>
		</template>
		<template #header_right>
			<el-button @click="formTableRef.handleOperate('add')" type="primary">新建</el-button>
			<el-button @click="formTableRef.handleOperate('open')">启用</el-button>
			<el-button @click="formTableRef.handleOperate('stop')">停用</el-button>
			<el-button @click="formTableRef.handleOperate('delete')" type="danger">删除</el-button>
		</template>
		<template #main>
			<FormTablePanel :typeNode="treeSelected" ref="formTableRef" />
		</template>
	</RkContainer>
</template>
<script setup>
import { defineAsyncComponent, nextTick } from 'vue';
import { RkTreePanel } from '@/components/tree';
const FormTablePanel = defineAsyncComponent(() => import('./FormTablePanel.vue'));

const formTableRef = ref('');
const treeSelected = ref(null);
const handleTreeChange = (data, node) => {
	treeSelected.value = data;
	nextTick(() => {
		formTableRef.value.handleSearch();
	});
};
</script>
<style lang="scss" scoped></style>
